<%@ page import="it.domain.PageBean" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="layui/css/layui.css">

<script src="layui/layui.js"></script>
<script src="statics/jquery-3.4.1.js"></script>
<html>
<head>
    <title>图书清单</title>
    <style>
        .maintable {
            border: gray 1px solid;
            border-radius: 5px;
            padding-left: 20px;
            padding-right: 20px;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }

        th {
            text-align: right;
            height: 50px;
            vertical-align: middle;
        }

        td {
            height: 50px;
            text-align: center;
        }

        p {
            font-size: 30px;
            /*border: 1px solid red;*/
            text-align: center;
            color: hotpink;
            margin-top: 10px;
        }

        #page {
            /*border: solid 1px red;*/
            text-align: center;
            margin-top: 15px;
            width: 420px;
            margin-left: 420px;
            float: left;
        }

        #pagecount {
            /*border: 1px solid red;*/
            float: right;
            width: 50px;
            height: 80px;
            margin-right: 300px;
            margin-top: 25px;
            width: 250px;
        }

        #pages {
            font-size: 15px;
            float: left;
            border: 1px solid gray;
            border-radius: 3px;
            width: 80px;
            margin-top: 12px;
            padding-left: 20px;
            padding-top: 2px;
            height: 25px;
        }

        #counts {
            font-size: 15px;
            float: right;
            width: 100px;
            margin-bottom: 20px;
            margin-top: 12px;
            border: 1px solid gray;
            border-radius: 3px;
            height: 25px;
            margin-right: 10px;
            padding-left: 15px;
            padding-top: 2px;
        }

        a:link {
            text-decoration: none;
            color: white;
        }

        a:visited {
            text-decoration: none;
            color: white;
        }

        a:hover {
            text-decoration: none;
            color: white;
        }

        a:active {
            text-decoration: none;
            color: white;
        }
    </style>
</head>

<body>
<%--头部--%>
<ul class="layui-nav" lay-filter="">
    <!--    layui-this-->
    <li class="layui-nav-item"><a href="books_home.jsp">首页</a></li>
    <li class="layui-nav-item   layui-this">
        <a href="javascript:;">图书管理</a>
        <dl class="layui-nav-child "> <!-- 二级菜单 -->
            <dd><a href="${pageContext.request.contextPath}/pageServlet?currentPage=1" style="font-size: 15px">图书清单</a>
            </dd>
            <dd><a href="books_search.jsp" style="font-size: 15px">图书查询</a></dd>
            <dd><a href="books_add.jsp" style="font-size: 15px">添加图书</a></dd>
        </dl>
    </li>

    <li class="layui-nav-item">
        <a href="javascript:;">读者管理</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="${pageContext.request.contextPath}/userInfo?currentPage=1" style="font-size: 15px">信息显示</a></dd>
            <dd><a href="manager_adduser.jsp" style="font-size: 15px">添加读者</a></dd>
        </dl>
    </li>

    <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/borrowInf?currentPage=1">图书借阅信息</a></li>
    <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/returnbooks?currentPage=1">图书归还信息</a></li>
    <li class="layui-nav-item" style="float: right">
        <a href=""><img src="img/user.png" width="37px" height="38px" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:exit();">退出</a></dd>
        </dl>
    </li>
</ul>
<p>
    图书清单
    <%--    <a href="${pageContext.request.contextPath}/pageServlet?currentPage=1" class="layui-btn layui-btn-warm" style="border: bisque 1px solid">显示</a>--%>
</p>

<%--表格--%>
<div class="maintable">
    <table class="layui-table">
        <thead>
        <tr style="background-color: #e7c3c3">
            <td style="width: 60px">序号</td>
            <td style="width: 120px">书号</td>
            <td style="width: 120px">书名</td>
            <td style="width: 120px">作者</td>
            <td style="width: 100px">出版社</td>
            <td style="width: 100px">库存数量</td>
            <td style="width: 120px">出版日期</td>
            <td style="width: 120px">图书类别</td>
            <td>图书简介</td>
            <td style="width: 80px">修改</td>
            <td style="width: 80px">删除</td>
        </tr>
        <%--JSTL遍历表格--%>
        <c:forEach items="${requestScope.pageBean.booksList}" var="books" varStatus="s">
            <tr>
                <td>${s.count}</td>
                <td>${books.number}</td>
                <td>${books.name}</td>
                <td>${books.author}</td>
                <td>${books.press}</td>
                <td>${books.num}</td>
                <td>${books.date}</td>
                <td>${books.category}</td>
                <td>${books.information}</td>
                <td><a href="${pageContext.request.contextPath}/findBooks?id=${books.id}"><img
                        src='img/modify_icon.png' width='30px' height='30px'/></a></td>
                <td><a href="javascript:deleteBooks(${books.id});"><img src='img/delete_icon.png' width='30px'
                                                                        height='30px'/></a></td>
            </tr>
        </c:forEach>

        </thead>
        <tbody id="tbody"></tbody>
    </table>
</div>
<%--<%for(int i=0;i<10;i++)%>--%>
<%--分页--%>
<div id="page">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <%--            上一页--%>
            <c:if test="${requestScope.pageBean.currPage==1}">
                <li class="disabled">
                    <a href="${pageContext.request.contextPath}/pageServlet?currentPage=${requestScope.pageBean.currPage-1}
                    &number=${condition.number[0]}&name=${condition.name[0]}&author=${condition.author[0]}&press=${condition.press[0]}&category=${condition.category[0]}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            <c:if test="${requestScope.pageBean.currPage!=1}">
                <li>
<%--                进行条件查询时，防止点击分页时，查询的数值无法传参给分页方法--%>
                    <a href="${pageContext.request.contextPath}/pageServlet?currentPage=${requestScope.pageBean.currPage-1}
                    &number=${condition.number[0]}&name=${condition.name[0]}&author=${condition.author[0]}&press=${condition.press[0]}&category=${condition.category[0]}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            <c:forEach begin="1" var="i" step="1" end="${requestScope.pageBean.totalPage}">
                <%--设置激活状态--%>
                <c:if test="${requestScope.pageBean.currPage==i}">
                    <li class="active"><a href="${pageContext.request.contextPath}/pageServlet?currentPage=${i}&number=${condition.number[0]}
                            &name=${condition.name[0]}&author=${condition.author[0]}&press=${condition.press[0]}&category=${condition.category[0]}">${i}</a>
                    </li>
                </c:if>
                <c:if test="${requestScope.pageBean.currPage!=i}">
                    <li><a href="${pageContext.request.contextPath}/pageServlet?currentPage=${i}&number=${condition.number[0]}
                    &name=${condition.name[0]}&author=${condition.author[0]}&press=${condition.press[0]}&category=${condition.category[0]}">${i}</a>
                    </li>
                </c:if>
            </c:forEach>
            <%--            下一页--%>
            <c:if test="${requestScope.pageBean.currPage==requestScope.pageBean.totalPage}">
            <li class="disabled">
                </c:if>
                <c:if test="${requestScope.pageBean.currPage!=requestScope.pageBean.totalPage}">
            <li>
                </c:if>
                <a href="${pageContext.request.contextPath}/pageServlet?currentPage=${requestScope.pageBean.currPage+1}
                &number=${condition.number[0]}&name=${condition.name[0]}&author=${condition.author[0]}&press=${condition.press[0]}&category=${condition.category[0]}"
                   aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<div id="pagecount">
    <%--    总页数--%>

    <div id="pages">共${requestScope.pageBean.totalPage}页</div>
    <%--    总记录数--%>
    <div id="counts">共${requestScope.pageBean.totalCount}条记录</div>

</div>
</body>

<script type="text/javascript">
    //删除书籍时 确认操作
    function deleteBooks(id) {
        if (confirm("您确定要删除这条记录吗？")) {
            location.href = "${pageContext.request.contextPath}/deleteBooks?id=" + id;
        }
    }
</script>

<script type="text/javascript">
    function exit() {
        if(confirm("您确定要退出吗？")){
            location.href="Login.html";
        }
    }
</script>

<script type="text/javascript">
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
</html>
